
<template>
  <el-dialog 
		class="app-container"
		title="绑定本底"
    :visible.sync="dialogVisible"
		v-dialogDrag="true"
    width="60%"
    @close="closeDialog"
	>
    <el-row type="flex" :gutter="8">
      <el-col :span="8">
        <el-table
          ref="sendRefs"
          height="500"
          border
          v-loading="loading"
          :data="unBindResultList"
          @selection-change="handleUnSelectChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="剂量计编号" prop="dosageNumber" align="center" />
          <el-table-column label="姓名" align="center" prop="personnelName">
            <template slot-scope="{row}">
              {{ row.personnelName + (row.dosageType == 1 ? '(内)' : row.dosageType == 2 ? '(外)' : '') }}
            </template>
          </el-table-column>
          <el-table-column label="性别" align="center" prop="personnelSex">
            <template slot-scope="{row}">
              <dict-tag
								:value="row.personnelSex"
								:options="dict.type.sys_user_sex"
							></dict-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="2" style="display: flex;flex-direction: column;align-items: center;justify-content: center;">
        <el-button type="primary" icon="el-icon-arrow-right" :disabled="!selectUnBind.length" @click="handleLeftClick"></el-button>
        <el-button type="primary" style="margin-left: 0;margin-top: 8px;" :disabled="!selectBind.length" icon="el-icon-arrow-left" @click="handleRightClick"></el-button>
      </el-col>
      <el-col :span="14">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane v-for="(item, index) in bindBackgroundList" :key="index" :label="`本底${item.backgroundDosageNumber}`" :name="item.backgroundDosageNumber"></el-tab-pane>
        </el-tabs>
        <el-table
          ref="sendRefs"
          height="500"
          border
          :show-header="false"
          :data="nowBindData"
          @selection-change="handleBindSelectChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="剂量计编号" prop="dosageNumber" align="center" />
          <el-table-column label="姓名" align="center" prop="personnelName">
            <template slot-scope="{row}">
              {{ row.personnelName + (row.dosageType == 1 ? '(内)' : row.dosageType == 2 ? '(外)' : '') }}
            </template>
          </el-table-column>
          <el-table-column label="性别" align="center" prop="personnelSex">
            <template slot-scope="{row}">
              <dict-tag
								:value="row.personnelSex"
								:options="dict.type.sys_user_sex"
							></dict-tag>
            </template>
          </el-table-column>
          <el-table-column prop="" label="监测起止时间" align="center" width="200">
            <template slot-scope="{row}">
              {{ row.wearingBeginTime }} -
              {{ row.wearingEndTime }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
		
    <div slot="footer">
      <el-button type="primary" @click="handleConfirm">提 交</el-button>
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </div>
	</el-dialog>
</template>

<script>
import { getBindBackground, bindBackgroundData } from '@/api/slides/task'
export default {
  name: "BindBackground",
  dicts: ['sys_user_sex'],
  data() {
    return {
      // 查询参数
      taskDosimeterId: '',
      selected: [],
			total: 0,
			dialogVisible: false,
      comparisonVisible: false,
      loading: false,
      // 未绑定剂量计列表
      unBindResultList: [],
      bindBackgroundList: [], // 本底绑定列表
      nowBindData: [], // 当前绑定
      selectUnBind: [], // 未当前绑定
      selectBind: [], // 未当前绑定
      activeName: '',
    };
  },
  created() {
  },
  methods: {
		openDialog(data) {
      this.taskDosimeterId = data.taskDosimeterId
      this.getBindBackgrounds()
			this.dialogVisible = true
		},
    getBindBackgrounds() {
      this.loading = true
      getBindBackground({
        taskDosimeterId: this.taskDosimeterId
      }).then(res => {
        this.unBindResultList = res.data.unBindResultList
        this.bindBackgroundList = res.data.bindBackgroundList
        this.activeName = res.data.bindBackgroundList[0].backgroundDosageNumber
        this.nowBindData = [...res.data.bindBackgroundList[0]?.resultList] || []
      }).finally(() => {
        this.loading = false
      })
    },
    // 左
    handleUnSelectChange(selection) {
      this.selectUnBind = selection
    },
    handleBindSelectChange(selection) {
      this.selectBind = selection
    },
    // 选中未选中的到对应的tab data
    handleLeftClick() {
      console.log(this.selectUnBind);
      
      this.selectUnBind.forEach(item => {
        const fIndex = this.unBindResultList.findIndex(i => i.dosageNumber == item.dosageNumber)
        this.unBindResultList.splice(fIndex, 1)
        this.nowBindData.push(item)

        // 插入对应tab下
        const bFind = this.bindBackgroundList.findIndex(i => i.backgroundDosageNumber == this.activeName)
        this.bindBackgroundList[bFind].resultList ? this.bindBackgroundList[bFind].resultList.push(item) : (this.bindBackgroundList[bFind].resultList = [item])
        console.log(this.bindBackgroundList);
        
      });
    },
    handleRightClick() {
      console.log(this.selectBind);
      
      this.selectBind.forEach(item => {
        // 插入对应tab下
        const bFind = this.bindBackgroundList.findIndex(i => i.backgroundDosageNumber == this.activeName)
        const itemIndex = this.bindBackgroundList[bFind].resultList?.findIndex(i => i.dosageNumber == item.dosageNumber)
        this.bindBackgroundList[bFind].resultList.splice(itemIndex, 1)

        this.unBindResultList.push(item)
        const nowIndex = this.nowBindData.findIndex(i => i.dosageNumber == item.dosageNumber)
        this.nowBindData.splice(nowIndex, 1)

        
      });
    },
    handleConfirm() {
      const bindBackgroundBos = this.bindBackgroundList.reduce((pre, cur) => {
        const ite = cur?.resultList?.map(i => i.taskPersonalResultId) || []
        pre.push({
          backgroundId: cur.backgroundId,
          taskPersonalResultIds: ite
        })
        return pre
      }, [])
      bindBackgroundData({
        taskDosimeterId: this.taskDosimeterId,
        bindBackgroundBos
      }).then(res => {
        this.dialogVisible = false
        this.$modal.msgSuccess("绑定成功");
        this.$emit('handleConfirm')
      })
    },
    handleClick(tab, event) {
      const name = tab.name
      const bFind = this.bindBackgroundList.findIndex(i => i.backgroundDosageNumber == name)
      this.nowBindData = [...this.bindBackgroundList[bFind]?.resultList || []]
      
    },
    closeDialog() {
      this.nowBindData = []
    },
    closeAdd() {
      
    },
  }
};
</script>

<style lang="scss" scoped>
::v-deep .handletabel.el-table {
	margin-bottom: 60px;
	overflow: auto;
	.el-table__body-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
	}
}
</style>
